<!DOCTYPE html>
{% set navigation_bar = [
    ("Home", "/", '<span class="glyphicon glyphicon-home"></span>'),
    ("Database", None, None),
    ("Upload", "/upload", '<span class="glyphicon glyphicon-upload"></span>'),
    ("Statistic", "/statistic", '<span class="glyphicon glyphicon-stats"></span>'),
    ("System", "/system_health", '<span class="glyphicon glyphicon-heart"></span>'),
    ("About", "/about", '<span class="glyphicon glyphicon-globe"></span>'),
    ("Admin", None, None)
] -%}

{% if ("string only here to have input to " | auth_enabled) %}
    {% do navigation_bar.append(("Login", None, None)) %}
{% endif %}

{% set active_page = active_page|default('Home') -%}

<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>FACT</title>
        <link rel="shortcut icon" href="{{ url_for('static', filename='fact_icon.ico') }}">
        <!-- Bootstrap -->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/css/bootstrap-theme.css') }}">
        <script type="text/javascript" src="{{ url_for('static', filename='bootstrap/js/jquery.min.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>

        <script type="text/javascript" src="{{ url_for('static', filename='bootstrap/js/moment.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='bootstrap/js/bootstrap-datetimepicker.min.js') }}"></script>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/css/bootstrap-datetimepicker.min.css') }}">

        <script>
            $(document).ready(function(){
              $('[data-toggle="tooltip"]').tooltip();
              $(".toggle").click(function(){
                $(".expand").toggle();
              });
            })
            function toggleCollapse() {
                $('#quick_search_div').collapse("toggle");
                if ($("#nav_quick_search").hasClass("active")) {$("#nav_quick_search").removeClass("active")} else {$("#nav_quick_search").addClass("active")};
                document.getElementById("quick_search_input").focus();
            }
            function quickSearch() {
                var search_input = document.getElementById('quick_search_input').value;
                var url = '/database/quick_search?search_term=' + search_input;
                window.location = url;
            }
        </script>
        
        {% block head %}
        {% endblock %}
        
        <style>
            body{
                padding-top: 70px;
            }
            a:link{
                color:#2b669a;
                text-decoration:none;
            }
            td.clickable {
                cursor:pointer;
            }
            .navbar-inner {
                background-color: #255e54; /*#607873; /* background color will be black for all browsers */
                background-image: none;
                background-repeat: no-repeat;
                filter: none;
            }
                .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a {
                color: #ddd;
            }
                .navbar-default .navbar-brand:hover, .navbar-default .navbar-nav > li > a:hover {
                color: #fff;
            }
            .tooltip > .tooltip-inner {
                background-color: #2b669a;
                color: #FFFFFF;
                border: 1px solid #2b669a;
                padding: 5px;
                font-size: 15px;
            }
            .tooltip.top > .tooltip-arrow {
                border-top: 5px solid #2b669a;
            }
        </style>
        {% block styles %}{% endblock %}
    </head>

    <body>

    <nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-inner" style="margin-bottom:0; padding: 0">
        <div class="container-fluid" style="padding: 0">
            <div class="navbar-header">
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <div class="navbar-brand hidden-sm hidden-md" style="vertical-align: middle; margin-left: 15px">
                    <span><img height="25px" src="{{ url_for('static', filename='fact_logo_inv.svg') }}"></span>
                </div>
                <div class="navbar-brand hidden-sm hidden-md" style="vertical-align: middle">
                    Firmware Analysis and Comparison Tool
                </div>
            </div>
            <div id="navbarCollapse" class="collapse navbar-collapse">
                <!-- Navbar Elements -->
                <ul class="nav navbar-nav navbar-left" style="padding-right: 5px">
                    {% for caption, href, icon in navigation_bar %}
                        {% if caption == "Database" %}
                            <li class="dropdown {% if caption == active_page %}active{% endif  %}">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-tasks"></span>&nbsp;Database<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="/database/browse">Browse Firmware Analyses</a></li>
                                    <li><a href="/database/browse_compare">Browse Firmware Compares</a></li>
                                    <li><a href="/database/search">Basic Search</a></li>
                                    <li><a href="/database/advanced_search">Advanced Search</a></li>
                                    <li><a href="/database/binary_search">Binary Pattern Search</a></li>
                                </ul>
                            </li>
                        {% elif caption == "Admin" %}
                            {% if current_user | user_has_role('manage_users') %}
                                <li class="dropdown {% if caption == active_page %}active{% endif  %}">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;{{ caption }}<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="/admin/manage_users">Manage Users</a></li>
                                    </ul>
                                </li>
                            {% endif %}
                        {% elif caption == "Login" %}
                            <li {% if caption == active_page %} class="active"{% endif  %}>
                                {% if current_user.is_authenticated %}
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;{{ current_user.email }}<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="/user_profile"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
                                        <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                                    </ul>
                                {% else %}
                                    <a href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
                                {% endif %}
                            </li>
                        {% else %}
                            <li {% if caption == active_page %} class="active"{% endif  %}>
                                <a href={{ href }}>{{ icon|safe }} {{ caption }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>

                <!-- Navbar Quick Search Button -->
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden-xs float-right" id="nav_quick_search" style="padding-right: 15px">
                        <a class="dropdown-toggle" onclick="toggleCollapse()">
                            <span class="glyphicon glyphicon-search"></span>
                        </a>
                    </li>
                </ul>

                <!-- Navbar Quick Search Input -->
                <div id="quick_search_div" class="col-sm-12 hidden-xs collapse" style="padding: 0">
                    <div style="width: 100%; padding: 0; margin: 0;">
                        <div class="input-group" style="width: 100%; padding: 0; margin: 0; background-color: #e7e7e7;">
                            <input type="text" class="form-control" placeholder="Quick search name, vendor and hash values" id="quick_search_input" onKeyDown="if(event.keyCode==13) quickSearch();" style="margin: 0; background-color: #e7e7e7; border-radius: 0;">
                            <span class="input-group-addon" style="background: white !important; width: 44px; padding: 0; margin: 0; border-radius: 0;">
                                <button onclick="quickSearch()" style="border:0; background:transparent; padding: 0; margin: 0;">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </nav>

    <div style="width:90%; margin: 0 auto;">

        <!-- flash messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
            <div class="row" style="padding: 0">
                <div class="col-xs-12">
                    {% for category, message in messages %}
                        <div style="padding: 15px; margin-bottom: -15px">
                            {% set flash_categories = ['danger', 'warning', 'info', 'success'] %}
                            <div class="alert alert-{{ category if category in flash_categories else 'danger' }} alert-dismissible" role="alert">
                                {{ message }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        {% endwith %}

        <div class="container-fluid">
            {% block body %}{% endblock %}
        </div>
    </div>

    <hr style="margin-top: 30px;">
    
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-4" style="text-align:center;">
			powered by <a href="https://fkie-cad.github.io/FACT_core/">FACT {{ "" | print_program_version }}</a><br />
			&copy; <a href="http://www.fkie.fraunhofer.de">Fraunhofer FKIE</a> 2015-2018
		</div>
		<div class="col-md-4"></div>
	</div>
    
    </body>
</html>
